<template>
    <div class="record">
        <div class="recordList">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="0">
                <ul>
                    <li v-for="item in listdata" :key="item.id">
                        <div class="rtxt flex">
                            <div class="flex2">
                                <div class="fl">订单号：</div>
                                {{item.orderNumber}}
                            </div>
                            <div class="state" v-if="item.state == 1">支付成功</div>
                            <div class="state state1" v-if="item.state == 2">支付取消</div>
                            <div class="state state2" v-if="item.state == 0">等待付款</div>
                        </div>
                        <!-- <div class="rtxt flex2">
                            <div class="fl">支付方式：</div>
                            支付宝支付
                        </div> -->
                        <div class="rtxt flex2">
                            <div class="fl">支付金额：</div>
                            ¥{{item.money}}
                        </div>
                        <div class="rtxt flex2" v-if="item.payTime">
                            <div class="fl">支付时间：</div>
                            {{item.payTime}}
                        </div>
                        <div class="rtxt flex2">
                            <div class="fl">孩子信息：</div>
                            <div class="flex2">
                                <span>{{item.name}}</span>
                                <span>{{item.gender == 2 ? '女':'男'}}</span>
                                <span>{{item.age}}岁</span>
                                <span>{{item.entryClassName}}</span>
                            </div>
                            <div class="editbtn" v-if="item.state == 0" @click="editBtn(item)">修改</div>
                        </div>
                        <div class="btns flex2" v-if="item.state == 0">
                            <div class="borderBtn btn1" @click="cancelHandle(item.id)">取消订单</div>
                            <div class="solidBtn" @click="goPay(item.id)">去付款</div>
                        </div>
                    </li>
                </ul>
            </van-list>
        </div>
       
        <!-- 修改信息弹窗 -->
        <div class="mask" v-if="showInfo">
            <div class="editInfo">
                <div class="editTit">孩子信息</div>
                <van-form>
                    <van-field
                        v-model="bmInfo.name"
                        name="name"
                        label="学生姓名"
                        placeholder="请填写学生姓名"
                        :colon="true"
                        input-align="right"
                        required
                        :rules="[{ required: true, message: '' }]"
                    />
                    <van-field 
                        name="gender" 
                        label="性别"  
                        :colon="true"
                        input-align="right"
                        required>
                        <template #input>
                                <van-radio-group v-model="bmInfo.gender" direction="horizontal">
                                    <van-radio :name="1" class="flex2">
                                        男
                                        <template #icon="props">
                                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                                        </template>
                                    </van-radio>
                                    <van-radio :name="2" class="flex2">
                                        女
                                        <template #icon="props">
                                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                                        </template>
                                    </van-radio>
                                </van-radio-group>
                        </template>
                    </van-field>
                    <van-field
                        v-model="bmInfo.age"
                        name="age"
                        label="年龄"
                        placeholder="请填写年龄"
                        type="number"
                        :colon="true"
                        input-align="right"
                        required
                        :rules="[{ required: true, message: '' }]"
                    />
                    <van-field
                        readonly
                        clickable
                        :value="bmInfo.entryClass"
                        label="班级"
                        placeholder="请选择班级"
                        :colon="true"
                        input-align="right"
                        right-icon="arrow"
                        required
                        @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker
                            show-toolbar
                            :columns="columns"
                            value-key="name"
                            @confirm="onConfirm"
                            @cancel="showPicker = false"
                        />
                    </van-popup>
                    <van-field
                        v-model="bmInfo.idCard"
                        name="idCard"
                        label="学生身份证"
                        placeholder="请填写学生身份证"
                        :colon="true"
                        input-align="right"
                        required
                        maxlength="18"
                        :rules="[{ required: true, message: '' }]"
                    />
                    <van-field
                        v-model="bmInfo.parentName"
                        name="parentName"
                        label="家长姓名"
                        placeholder="请填写家长姓名"
                        :colon="true"
                        input-align="right"
                        required
                        :rules="[{ required: true, message: '' }]"
                    />
                    <van-field
                        v-model="bmInfo.phone"
                        name="phone"
                        label="联系电话"
                        placeholder="请填写联系电话"
                        type="number"
                        :colon="true"
                        input-align="right"
                        required
                        maxlength="11"
                        :rules="telRules"
                    />
                    <div class="flex2 maskBtn">
                        <van-button round  color="#f6f6f6" class="mBtn cancelBtn" @click="showInfo = false">取消</van-button>
                        <van-button round  color="#09ABF4"  class="mBtn sureBtn" @click="onSubmit">确认</van-button>
                    </div>
                </van-form>
               
            </div>
        </div>
    </div>
</template>
<script>
import { index } from "@/https/api";
import { Dialog,Toast } from "vant";
export default {
    name: "record",
    data() {
        return {
            page: 0,
            pageSize: 10,
            loading: false,
            finished: false,
            listdata:[], // 列表
            columns: [], //班级
            showPicker: false,
            bmInfo:{
                id:'', //缴费记录id
                name:'', //学生名字
                idCard:'', //学生身份证
                gender:1,  //性别：1男，2女，0未勾选
                age:'', //年龄
                parentName:'', //家长姓名     
                phone:'', //家长电话
                entryClassId:'', //班级id   
                entryClass:'',            
            },
            activeIcon: require('@/assets/img/choseOn.png'),
            inactiveIcon: require('@/assets/img/chose.png'),
            showInfo:false, //修改信息弹窗
            // 校验手机号码
            telRules: [
                {
                    required: true,
                    message: '手机号码不能为空',
                    trigger: 'onBlur'
                }, 
                {
                    // 自定义校验规则
                    validator: value => {
                        return /^1[3|4|5|7|8|9][0-9]{9}$/
                            .test(value)
                    },
                    message: '请输入正确格式的手机号码',
                    trigger: 'onBlur'
                }
            ]
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            this.loading = true;
            this.finished = false;
            this.page = 0;
            this.listdata = [];
            this.onLoad();
        },
        async onLoad() {
            this.page++;
            let res = await index.recordList({
                page: this.page,
                pageSize: this.pageSize,
            });
            this.loading = false;
            if (res.code == 1) {
                if (res.data.list.length > 0) {
                    this.listdata = this.listdata.concat(res.data.list);

                    // this.bmInfo.entryCourseId = res.data.list[0].entryCourseId
                    this.bmInfo.id = res.data.list[0].id
                    this.bmInfo.name = res.data.list[0].name
                    this.bmInfo.gender = res.data.list[0].gender
                    this.bmInfo.age = res.data.list[0].age
                    this.bmInfo.entryClassId = res.data.list[0].entryClassId
                    this.bmInfo.entryClass = res.data.list[0].entryClassName
                    this.bmInfo.idCard = res.data.list[0].idCard
                    this.bmInfo.parentName = res.data.list[0].parentName
                    this.bmInfo.phone = res.data.list[0].phone

                    if (res.data.list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            } else {
                this.finished = true;
            }
        },
        //获取班级
        async getClassData (id){
           const res = await index.getClassList({
            id
           }); 
           if (res.code != 1) return 
           this.columns = res.data.list
        },
        // 选择班级
        onConfirm(value){
            console.log('选择班级', value);
            this.bmInfo.entryClassId = value.id
            this.bmInfo.entryClass = value.name
            this.showPicker = false
        },
        //点击修改
        editBtn(data){
            this.getClassData(data.entryCourseId)
            this.showInfo = true
            this.bmInfo.id = data.id
            this.bmInfo.name = data.name
            this.bmInfo.gender = data.gender
            this.bmInfo.age = data.age
            this.bmInfo.entryClassId = data.entryClassId
            this.bmInfo.entryClass = data.entryClassName
            this.bmInfo.idCard = data.idCard
            this.bmInfo.parentName = data.parentName
            this.bmInfo.phone = data.phone
        },
        // 修改信息提交
        async onSubmit(){
            Toast.loading({
                message: "加载中...",
            });
            const res = await index.updateInfo({
                ...this.bmInfo,
            });
            Toast.clear();
            if(res.code == 1){
                //  支付
                // document.write(res.data)
                this.showInfo = false
                Toast(res.msg);
                this.init()
                  
            }else{
                Toast(res.msg);
            }

        },
        // 继续支付
        async goPay(id){
            Toast.loading({
                message: "加载中...",
            });
            const res = await index.replyPay({
                id
            })
            Toast.clear();
            if(res.code == 1){
                //  支付
                // document.write(res.data) 
                const div = document.createElement('div')  //凭空创建div变量
                div.innerHTML = res.data  //后端返回数据
                document.body.appendChild(div)
                document.forms['punchout_form'].submit(); //注意此处的表单提交，与后端返回form表单一致
                div.remove()  


            }else{
                Toast(res.msg);
            }
        },
        // 取消订单
        cancelHandle(id){
            Dialog.confirm({
                title: '提示',
                message: '是否确认取消该订单',
            })
            .then(async() => {
                // on confirm
                const res = await index.cancelOrder({
                    id
                })
                Toast(res.msg);
                this.init()
            })
            .catch(() => {
                // on cancel
            });
            
        }

    }
} 
</script>
<style lang="scss" scoped>
.recordList{
    li{
        background: #fff;
        padding: .32rem;
        box-sizing: border-box;
        margin-bottom: .24rem;
        .rtxt{
            font-size: .28rem;
            color: #333;
            padding: .08rem 0;
            .fl{
                color: #999;
                width: 1.5rem;
                text-align-last: justify;
            }
            span{
                margin-right: .2rem;
            }
        }
        .state{
            font-size: .3rem;
            color: #09ABF4;
            font-weight: bold;
            line-height: .42rem;
        }
        .state1{
            color: #999;
        }
        .state2{   
            color: #FF2814;
        }
        .editbtn{
            width: 1.2rem;
            color: #09ABF4;
        }
        .btns{
            justify-content: flex-end;
            border-top: 0.02rem solid #f6f6f6;
            padding-top: .32rem;
            margin-top: .32rem;
            div{
                width: 1.8rem;
                height: .72rem;
                line-height: .72rem;
            }
            .btn1{
                margin-right: .48rem;
            }
        }
    }
}
.editInfo{
    width: 5.64rem;
    background: #FFFFFF;
    border-radius: .16rem;
    padding: .48rem .16rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    box-sizing: border-box;
    .editTit{
        font-size: .32rem;
        color: #333;
        font-weight: bold;
        text-align: center;
    }
    .img-icon {
        height: .28rem;
        width: .28rem;
    }
    :deep(.van-radio__icon){
        display: flex;
        align-items: center;
    }
    .maskBtn{
        justify-content: space-around;
        margin-top: .72rem;
        .mBtn{
            width: 1.56rem;
            height: .66rem;
            border-radius: .1rem !important;
        }
    }
    .cancelBtn{
        color: #999 !important;
    }
}
</style>